<template>
    <div>
        <p @click="count++">count:{{ count }}</p>
        <!-- 使用对象 -->
        <p @click="userObj.age++">{{ userObj.name }}--{{ userObj.age }}</p>

        <!-- 使用torefs 解构响应式对象 -->
        <p @click="age1++">{{ name1 }}--{{ age1 }}</p>
    </div>
</template>

<script setup>
// 01: toRef()
// 语法1:  const 变量 = toRef(初始值)
// 语法2:  const 变量2 = toRef(要处理对象, 对象中的key)  将对象中的某一个属性设置成响应式数据
// 作用: 就是将一个普通的数据转换成一个响应式的数据

import { reactive, toRef, toRefs } from "vue";

// toRefs()
// 语法: 将响应式数据中的每一个属性都变成响应式
// const 变量= toRefs(响应式数据)


// 可以将普通数据转成ref 引用数据
const count = toRef(100);
// console.log(count);

const userObj = reactive({
    name: '小明',
    age: 20
})

const name = toRef(userObj, 'name')
const age = toRef(userObj, 'age')
// const { name, age } = userObj
// console.log('userObj', userObj);
// console.log(name, age);



// 使用toRefs

const userObj2 = reactive({
    name1: '小红',
    age1: 18
})

console.log('userObj2', userObj2);

const userObj3 = toRefs(userObj2)

console.log('userObj3', userObj3);

const { name1, age1 } = userObj3




</script>
<style scoped></style>